<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>会员注册</title>
    <style>
      .form-group {
        margin-bottom: 15px;
      }

      .form-label {
        display: inline-block;
        width: 100px;
        text-align: right;
        margin-right: 10px;
      }

      .intro-wrapper {
        display: flex;
        align-items: center;
        margin-bottom: 15px;
        min-height: 180px;
      }

      .intro-wrapper .form-label {
        vertical-align: middle;
      }

      #verifyCode {
        font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
        letter-spacing: 2px;
        font-weight: bold;
        background-color: rgb(200, 180, 255);
        color: #5a2ca0;
      }

      #refreshBtn {
        cursor: pointer;
        background-color: #add8e6;
        border: 1px solid #87ceeb;
        border-radius: 3px;
        padding: 2px 8px;
        font-size: 16px;
      }

      #refreshBtn:hover {
        background-color: #87ceeb;
      }

      .required {
        color: red;
      }

      #preview {
        margin-bottom: 15px;
      }

      .submit-group {
        margin-left: 115px;
      }

      textarea[name="intro"] {
        vertical-align: middle;
      }
    </style>
  </head>

  <body>
    <h5>&nbsp;<span style="color: blue">欢迎注册会员</span></h5>

    <div class="form-group">
      <span class="form-label">手机号码：</span>
      <input
        type="tel"
        name="phonenumber"
        maxlength="11"
        placeholder="11位手机号"
        required
      />
      <span class="required">必填</span>
    </div>

    <div class="form-group">
      <span class="form-label">创建密码：</span>
      <input
        type="password"
        name="pwd"
        maxlength="8"
        placeholder="8位密码"
        required
      />
      <span class="required">必填</span>
    </div>

    <div class="form-group">
      <span class="form-label">注册邮箱：</span>
      <input
        type="email"
        name="eml"
        placeholder="例如wustzz@sina.com"
        required
      />
      <span class="required">必填</span>
    </div>

    <div class="form-group">
      <span class="form-label">验证码：</span>
      <input
        type="text"
        id="verifyInput"
        placeholder="请输入验证码"
        maxlength="4"
      />
      <span id="verifyCode" style="padding: 5px; margin-right: 5px"
        >生成中...</span
      >
      <button id="refreshBtn">↻</button>
    </div>

    <div class="form-group">
      <span class="form-label">性别：</span>
      <label>
        <input type="radio" name="sex" value="male" checked="checked" /> 男
      </label>
      <label> <input type="radio" name="sex" value="female" /> 女 </label>
    </div>

    <div class="form-group">
      <span class="form-label">生日：</span>
      <input type="date" />
    </div>

    <div class="form-group">
      <span class="form-label">年龄：</span>
      <input type="number" name="age" min="0" max="120" />
    </div>

    <div class="form-group">
      <span class="form-label">籍贯：</span>
      <select name="省" size="1">
        <option value="值1">湖北</option>
        <option value="值2">暂不支持</option>
      </select>
      <select name="市" size="1">
        <option value="值1">武汉</option>
        <option value="值2">暂不支持</option>
      </select>
    </div>

    <div class="form-group">
      <span class="form-label">个人学历：</span>
      <select name="学历" size="1">
        <option value="值1">本科</option>
        <option value="值2">暂不支持</option>
      </select>
    </div>

    <div class="form-group">
      <span class="form-label">月薪：</span>
      <input
        type="range"
        id="score"
        name="score"
        min="0.0"
        max="10000.0"
        step="0.5"
        value="5000.0"
      />
      <span id="msg"></span>
    </div>

    <div class="form-group">
      <span class="form-label">个人爱好：</span>
      <label>
        <input type="checkbox" name="like" value="sing" checked />唱歌
      </label>
      <label> <input type="checkbox" name="like" value="run" />跑步 </label>
      <label> <input type="checkbox" name="like" value="swim" />游泳 </label>
    </div>

    <div id="preview">
      <span class="form-label">个人照片：</span>
      <input type="file" name="" id="file" value="上传文件" />
      <br />
      <img
        id="previewImg"
        style="width: 300px; display: none; margin-left: 115px"
      />
    </div>

    <div class="intro-wrapper">
      <span class="form-label">个人简介：</span>
      <textarea name="intro" cols="30" rows="12"></textarea>
    </div>

    <div class="submit-group">
      <form action="data.html" method="get">
        <input type="submit" value="提交" />
        <input type="reset" value="重填" />
      </form>
    </div>

    <script>
      var file = document.getElementById("file");
      var img = document.getElementById("previewImg");
      file.onchange = function () {
        var fileReader = new FileReader();
        fileReader.readAsDataURL(this.files[0]);
        fileReader.onload = function () {
          img.src = fileReader.result;
          img.style.display = "block";
        };
      };
      var msg = document.getElementById("msg");
      window.onload = function () {
        generateVerifyCode();
        document.getElementById("refreshBtn").onclick = generateVerifyCode;
        msg.innerHTML = document.getElementById("score").value;
      };
      document.getElementById("score").onchange = function () {
        msg.innerHTML = this.value;
      };
      function generateVerifyCode() {
        const chars =
          "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
        let code = "";
        for (let i = 0; i < 4; i++) {
          const randomIndex = Math.floor(Math.random() * chars.length);
          code += chars[randomIndex];
        }
        document.getElementById("verifyCode").innerText = code;
      }
      // 获取滑块和显示数值的元素
      const rangeInput = document.getElementById("score");
      const msgSpan = document.getElementById("msg");

      // 初始化时显示默认值
      msgSpan.textContent = rangeInput.value;

      // 监听滑块的input事件（拖动时实时触发）
      rangeInput.addEventListener("input", function () {
        msgSpan.textContent = this.value;
      });
    </script>
  </body>
</html>
